<template>
	<view class="head">
			<view class="img" @click="back">
				<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
			</view>
			<view class="message">
				<text>废活性炭</text>
			</view>
		</view>
	
		<view class="body">
			<view class="coantent">
				<view class="cantair">
					<view class="select">
						<view class="box">
							<view class="bbs">
								<view class="textsv">
									<view class="jilu" v-for="(item,index) in jilu " @click="show(index)">{{item.name}}
										<view class="wl" v-show="activeIndex === index"></view>
									</view>
								</view>
							</view>
						</view>
						<view class="bottomsss">
							<view class="year">
								<uni-data-select v-model="selectedYear" :localdata="yearRange" @change="handleYearChange"
									:clear="false" placeholder="请选择年份">
								</uni-data-select>
							</view>
	
							<view class="year">
								<uni-data-select v-model="quarters" :localdata="quarter" @change="handlequartersChange"
									:clear="false" placeholder="请选择季度">
								</uni-data-select>
							</view>
							<view class="year">
								<uni-datetime-picker type="date" :clear-icon="false" v-model="single"
									@maskClick="maskClick">
								</uni-datetime-picker>
							</view>
						</view>
					</view>
				</view>
				
				<scroll-view scroll-y="true" class="scroll-container">
					<view class="boxse">
						<text class="text">
							<text style="color: red;">2025</text>年<text style="color: red;">5</text>月份危废记录共产生<text
								style="color: red;">300</text>条数据,入库记录
							<text style="color: red;">200</text>条,出库记录 <text style="color: red;">100</text>条,转移联单<text
								style="color: red;">20</text>份
						</text>
					</view>
					
					<!-- 入库记录 -->
					<view class="table" v-show="Storagerecord === 0">
						<view class="tableshead">
							<view class="one">入库日期</view>
							<view class="one">入库量(kg)</view>
							<view class="one">入库图片</view>
							<view class="one">操作人</view>
						</view>
						<view class="table-box">
							<view class="table-boxs" v-for="(item,index) in tableData" :key="index">
								<view class="two">{{item.dateTime}}</view>
								<view class="two number">{{item.quantity}}</view>
								<view class="two teows">
									<image src="/static/pictures.png" mode=""></image>
									<view style="font-family: Microsoft YaHei;font-weight: 400;font-size: 21rpx;color: #0874FA;"
										@click="previewImage">查看图片</view>
								</view>
								<view class="two number">{{item.operator}}</view>
							</view>
							<view style="height: 30rpx; background-color: #fffff;"></view>
						</view>
					</view>
					
					<!-- 出库记录 -->
					<view class="tables" v-show="Storagerecord === 1">
						<view class="chukujilu">
							<view class="jan"></view>
							<view class="weiwai">{{Selfdisposal}}</view>
							<view class="mijh">
								<image :src="xiangzuobaseurl" mode="" @click="changebase"></image>
								<image :src="xiangyoubaseurl" mode="" @click="changebsesr"></image>
							</view>
						</view>
						<view class="tablesheads" v-if="tabs === 0" key="external">
							<view class="one">出库日期</view>
							<view class="one liange">出库量(kg)</view>
							<view class="one">处置类型</view>
							<view class="one">转移联单</view>
							<view class="one">委托协议</view>
							<view class="one">操作人</view>
						</view>
						<view class="tablesheads" v-if="tabs === 1" key="internal">
							<view class="one">出库日期</view>
							<view class="one liange">出库量(kg)</view>
							<view class="one">处置类型</view>
							<view class="one">处置方式</view>
							<view class="one">处置设施</view>
							<view class="one">操作人</view>
						</view>
						
						<!-- 自行处置 -->
						<view class="table-box" v-show="num === 1">
							<view class="table-boxs" v-for="(item,index) in tableData" :key="index">
								<view class="two time">{{item.dateTime}}</view>
								<view class="two number">{{item.quantity}}</view>
								<view class="two">自行处置</view>
								<view class="two">焚烧</view>
								<view class="two">焚烧炉</view>
								<view class="two number">{{item.operator}}</view>
							</view>
							<view style="height: 30rpx; background-color: #fffff;"></view>
						</view>
						
						<!-- 委外处置 -->
						<view class="table-box" v-show="num === 0">
							<view class="table-boxs" v-for="(item,index) in tableData" :key="index">
								<view class="two time">{{item.dateTime}}</view>
								<view class="two number">{{item.quantity}}</view>
								<view class="two">委外处置</view>
								<view class="two">
									<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/pictures.png" mode="" style="width: 55rpx;height: 45rpx;display: block;"></image>
									<view class="chakan" style="font-family: Microsoft YaHei;font-weight: 400;font-size: 21rpx;color: #0874FA;" @click="previewImage">
										点击查看
									</view>
								</view>
								<view class="two">
									<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/PDF.png" mode="" style="width: 55rpx;height: 45rpx;display: block;"></image>
								</view>
								<view class="two number">{{item.operator}}</view>
							</view>
							<view style="height: 30rpx; background-color: #fffff;"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	var range = ref([{
			value: 1,
			text: "废气"
		},
		{
			value: 2,
			text: "活性炭"
		}
	])
	const selectedYear = ref(new Date().getFullYear());
	var quarters = ref("")
	// 年份选择器数据：最近10年
	const generateYearRange = (count) => {
		const currentYear = new Date().getFullYear();
		const years = [];
		for (let i = 0; i < count; i++) {
			const year = currentYear - i;
			years.push({
				text: `${year}年`,
				value: year,
			});
		}
		return years;
	};

	const yearRange = generateYearRange(100);



	const value = ref(null);

	// 年份选择变化事件
	const handleYearChange = (index) => {
		// console.log('选中的年份索引:', index);
		quarters.value = index
		console.log(quarters.value);
	};

	// 其他选择器变化事件
	const change = (e) => {
		console.log('选中值变化:', e);
	};

	var quarter = ref([{
		value: 1,
		text: "第一季度"
	}, {
		value: 2,
		text: "第二季度"
	}, {
		value: 3,
		text: "第三季度"
	}, {
		value: 4,
		text: "第四季度"
	}])

	var months = ref("")

	var month = ref([{
		value: 1,
		text: "一月"
	}, {
		value: 2,
		text: "二月"
	}, {
		value: 3,
		text: "三月"
	}, {
		value: 4,
		text: "四月"
	}, {
		value: 5,
		text: "五月"
	}, {
		value: 6,
		text: "六月"
	}, {
		value: 7,
		text: "七月"
	}, {
		value: 8,
		text: "八月"
	}, {
		value: 9,
		text: "九月"
	}, {
		value: 10,
		text: "十月"
	}, {
		value: 11,
		text: "十一月"
	}, {
		value: 12,
		text: "十二月"
	}])

const tableData = [{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		},
		{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		},
		{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		},
		{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		},
		{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		},
		{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		},
		{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		},
		{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		},
		{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		},
		{
			dateTime: "2025-05-29 10:00:02",
			quantity: 20,
			operator: "张三"
		}
	];
	var jilu = ref([{
		name: "入库记录"
	}, {
		name: "出库记录"
	}])
function back (){
	uni.navigateBack({
		delta:1
	})
}
	const activeIndex = ref(0);
    var Storagerecord = ref(0)
	function show(index) {
		 activeIndex.value = index; // 总是设置当前激活项
		 Storagerecord.value = index; // 根据 index 设置对应内容（0=入库，1=出库）
	}

	// 查看图片
	const imageUrl = "https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/pictures.png"
	// 图片预览函数
	const previewImage = () => {
		uni.previewImage({
			urls: [imageUrl], // 使用定义好的图片URL
			current: 0, // 当前显示图片的索引
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		})
	}

	var rukujilu = ref(false)
	var xiangzuobaseurl = ref("https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xiangzuo.png")
	var xiangyoubaseurl = ref("https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xiangyou.png")
	var  xiangyoul = ref("https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xiangyoule.png")
	var Selfdisposal = ref("委外处置")
	var num = ref(0)
	var tabs = ref(0)
	function changebase() {
	  xiangzuobaseurl.value = "https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xiangzuo.png"
	  xiangyoubaseurl.value = "https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xiangyou.png"
	  Selfdisposal.value = "委外处置"
	  num.value = 0
	  tabs.value = 0
	  
	  // 添加强制更新
	  uni.$nextTick(() => {
	    this.$scope?.$apply() // 微信小程序专用强制更新
	  });
	}
	
	function changebsesr() {
	  xiangzuobaseurl.value = "https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xiangzuoan.png"
	  xiangyoubaseurl.value = "https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xiangyoule.png"
	  Selfdisposal.value = "自行处置"
	  num.value = 1
	  tabs.value = 1
	  // 添加强制更新
	  uni.$nextTick(() => {
	    this.$scope?.$apply() // 微信小程序专用强制更新
	  });
	}
</script>

<style lang="scss" scoped>
	.scroll-container {
		height: calc(100vh - 400rpx); /* 根据实际布局调整高度 */
	}
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		// width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			// width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100%;
		height: 100%;
		background-color: #f3f5f7;

		.coantent {
			width: 750rpx;
			background-color: #f3f5f7;

			.cantair {
				width: 749rpx;
				height: 237rpx;
				background-color: #FFFFFF;

				.select {
					width: 677rpx;
					height: 237rpx;
					// background-color: #f3f5f7;
					margin: 0 auto;
					// overflow: hidden;
					position: relative;

					.box {
						width: 667rpx;
						height: 75rpx;
						// background: #F3F5F7;
						// border-radius: 38rpx;
						position: absolute;
						top: 0rpx;
						left: 10rpx;

						.bbs {
							width: 667rpx;
							height: 95rpx;
							// background: red;
							// border-radius: 38rpx;
							position: relative;

							.textsv {
								width: 667rpx;
								height: 95rpx;
								position: relative;
								display: flex;
								justify-content: space-evenly;
								align-items: center;

								.jilu {
									height: 28rpx;
									font-family: Source Han Sans CN;
									font-weight: bold;
									font-size: 30rpx;
									color: #000000;
									line-height: 32rpx;
									position: relative;
								}

								.wl {
									width: 48rpx;
									height: 8rpx;
									background: #0874FA;
									border-radius: 4rpx;
									position: absolute;
									position: absolute;
									bottom: -12rpx;
									left: 40rpx;
									background-color: #0874FA;

								}

							}
						}
					}

					.bottomsss {
						width: 677rpx;
						height: 75rpx;

						position: absolute;
						top: 131rpx;
						display: flex;


						.year {
							width: 209rpx;
							height: 75rpx;
							background: #F3F5F7;
							border-radius: 38rpx;
							position: relative;

							.uni-stat__select {
								width: 190rpx;
								height: 75rpx;
								border-radius: 50%;
								background: #F3F5F7 !important;
								position: absolute;
								left: 10rpx;
								border-radius: 30% !important;

							}
						}
					}
				}
			}
		}
	}

	.uni-stat__select {
		width: 630rpx;
		height: 75rpx;
		border-radius: 50%;
		background: #F3F5F7;
		position: absolute;
		border: none;
		left: 20rpx;
	}

	.uni-stat-box {
		width: 667rpx;
		height: 75rpx;
		background: red;
		border-radius: 50%;
		border: none;
	}

	.uni-stat-box {
		width: 667rpx;
		height: 75rpx;
		background: red;
		border-radius: 50%;
	}

	.boxse {
		width: 640rpx;
		// height: auto;
		/* 自适应高度 */
		background: #FFFFFF;
		border-radius: 14rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 31rpx;
		color: #FA0808;
		line-height: 49rpx;
		border: 1px solid #A7A7A7;
		margin: 22rpx auto;
		padding: 20rpx 30rpx;
		/* 内边距调整 */
		display: flex;
		align-items: center;

		.text {
			display: block;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 31rpx;
			color: #828282;
			line-height: 45rpx;
			/* 调整行高 */
			word-break: break-all;
			/* 允许自动换行 */
			text-align: justify;
			/* 文字两端对齐 */
		}
	}

	.table {
		width: 749rpx;
		// height: 1200rpx;
		// background-color: #0874FA;
	}

	.tableshead {
		width: 749rpx;
		height: 95rpx;
		background: #E9F0FF;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.one {
			width: 148rpx;
			height: 29rpx;
			font-family: Microsoft YaHei;
			font-weight: 600;
			font-size: 29rpx;
			color: #030303;
			line-height: 40rpx;
			text-align: center;
			// background-color: #030303;
		}

	}

	.table-box {
		width: 749rpx;
		text-align: center;
		background-color: #ff;
		margin-bottom: 20rpx;

		.two {
			width: 144rpx;
			height: 61rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			
			// background-color: red;

			// background-color: #030303;
		}

		.number {
			line-height: 61rpx;
		}
	}

	.table-boxs {
		width: 749rpx;
		height: 123rpx;
		// background-color: #FA0808;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}



	.one,
	.two {
		width: calc(20% - 30rpx);
	}

	.table-boxs:nth-child(odd) {
		background-color: #ffffff;
	}

	/* 设置偶数行背景色为绿色（浅绿） */
	.table-boxs:nth-child(even) {
		background: #F3F5F9;
	}

	.teows {
		image {
			width: 55rpx;
			height: 45rpx;
		}
	}





	// 出库记录

	.tables {
		width: 749rpx;

		// height: 1200rpx;
		// background-color: #0874FA;
		.chukujilu {
			width: 749rpx;
			height: 95rpx;
			background-color: #ffffff;
			position: relative;

			.jan {
				width: 13rpx;
				height: 37rpx;
				background: #0874FA;
				border-radius: 5rpx;
				position: absolute;
				top: 29rpx;
				left: 31rpx;
			}

			.weiwai {
				height: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				font-size: 38rpx;
				color: #333333;
				line-height: 41rpx;
				position: absolute;
				top: 29rpx;
				left: 53rpx;
			}

			.mijh {
				position: absolute;
				top: 36rpx;
				left: 231rpx;

				image {
					display: block;
					width: 37rpx;
					height: 14rpx;
					margin-bottom: 3rpx;
				}
			}
		}

		.tablesheads{
			width: 749rpx;
			height: 95rpx;
			background: #E9F0FF;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.one {
				width: 86rpx;
				height: 69rpx;
				font-family: Microsoft YaHei;
				font-weight: 600;
				font-size: 29rpx;
				color: #030303;
				line-height: 40rpx;
				text-align: center;
				// background-color: red;
				// background-color: #030303;
			}
			
			.liange{
				width: 90rpx;
				height: 69rpx;
			}

		}

		.table-box {
			width: 749rpx;
			text-align: center;
			background-color: #ff;
			margin-bottom: 20rpx;

			.table-boxs {
				width: 749rpx;
				height: 123rpx;
				// background-color: #FA0808;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.two {
					width: 144rpx;
					height: 61rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					// line-height: 61rpx;
					// background-color: red;

					// background-color: #030303;
				}
           .time{
			   width: 108rpx;
			   height: 101rpx;
			   // background-color: red;
			   margin-left: 10rpx;
		   }
				.number {
					line-height: 61rpx;
				}
			}


		}

	}









	.one,
	.two {
		width: calc(20% - 30rpx);
	}

	.table-boxs:nth-child(odd) {
		background-color: #ffffff;
	}

	/* 设置偶数行背景色为绿色（浅绿） */
	.table-boxs:nth-child(even) {
		background: #F3F5F9;
	}

	.teows {
		image {
			width: 55rpx;
			height: 45rpx;
		}
	}
</style>